import React, { useEffect, useState } from 'react'
import { Table, Space, Button, Popconfirm, message } from 'antd';
import axios from '../../common/axios';
import { useHistory } from 'react-router-dom'
import { Category } from './add'
import { timestampToTime } from '../../common/utils'

export interface ArticleData {
    ID: string;
    title: string;
    description: string;
    content: string;
    author: string;
    publish_time: number;
    category: number;
}

interface CategoryJson {
    [key: number]: string
}

export default function Article() {
    const history = useHistory();
    const [data, SetData] = useState<ArticleData[]>([]);
    const [category, SetCategory] = useState<CategoryJson>();
    const [init, SetInit] = useState<number>();
    const columns = [
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title'
        },
        {
            title: '类别',
            dataIndex: 'category',
            key: 'category',
            render: (text: number) => {
                return <span>{category && category[text]}</span>
            }
        },
        {
            title: '发布时间',
            key: 'publish_time',
            dataIndex: 'publish_time',
            render: (text: number) => {
                return <span>{timestampToTime(text)}</span>
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text: string, record: ArticleData) => (
                <Space size="middle">
                    <a onClick={() => {
                        history.push(`/article/add?id=${record.ID}`)
                    }}>修改</a>
                    <Popconfirm
                        title="删除这条记录吗？"
                        onConfirm={async () => {
                            await axios({
                                url: '/blog/article',
                                method: 'DELETE',
                                params: {
                                    ID: record.ID
                                }
                            });
                            message.success('删除成功');
                            SetInit(Math.random());
                        }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    useEffect(() => {
        (async () => {
            const { data }: { data: ArticleData[] } = await axios({
                url: '/blog/article/list '
            });
            SetData(data)
        })();
        (async () => {
            const { data }: { data: Category[] } = await axios({
                url: '/blog/category'
            });
            let json: { [key: number]: string } = {};
            data.forEach(item => {
                json[item.ID] = item.name
            })
            SetCategory(json)
        })();
    }, [init])

    return (
        <>
            <div>
                <div style={{ marginBottom: 16 }}>
                    <Button type="primary" onClick={() => history.push('/article/add')}>新增</Button>
                </div>
                <Table rowKey="ID" bordered columns={columns} dataSource={data} />
            </div>
        </>
    )
}